<template>
  <div class="eg-timeline-inner">
    <el-timeline class="eg-time-line-inner" style="padding-left: 10px">
      <el-timeline-item
        class="line-item"
        v-for="(line, index) in manyPeoFlowList"
        :key="index"
        style="min-height: 70px"
      >
        <div class="line-right">
          <!-- 节点名称 -->
          <div class="list-node" style="padding-bottom: 10px">
            {{ line.nodeName || "" }}
            <span
              class="node-handle-time"
              v-if="line.status != '0'"
              style="float: right"
              >{{ line.endTime }}</span
            >
          </div>
          <!-- 单人 显示名称 -->
          <div class="list-node-name" v-if="line.approvals.length == 1">
            {{ line.approvals[0].name }}
            <span>{{ getstatus(line) }} </span>
          </div>
          <!-- 时间 -->
          <span
            v-if="
              line.type == 'target_post' ||
              line.type == 'target_pos' ||
              line.type == 'target_charge'
            "
          >
            <span
              v-if="
                line.approvals.length == 0 &&
                line.noneActionerAction == 'autoPass'
              "
              >(自动通过)</span
            >
            <span
              v-if="
                line.approvals.length == 0 && line.noneActionerAction == 'admin'
              "
              >(转交管理员)</span
            >
          </span>
          <!-- <span v-if="line.status == '7'">(转审批)</span> -->
          <span v-if="line.approvalMode == 'OR' && line.approvals.length > 1"
            >{{ line.approvals.length + "人或签" }}
          </span>
          <span v-if="line.approvalMode == 'AND' && line.approvals.length > 1"
            >{{ line.approvals.length + "人会签" }}
          </span>

          <span v-if="line.type == 'target_originator'">(发起人自己)</span>

          <!-- // 多人的时候， 显示头像 -->
          <div v-if="line.approvals.length > 1" style="display: flex">
            <span
              class="list-persin"
              v-for="ava in line.approvals"
              :key="ava.id"
              style="position: relative; height: 60px; width: 45px"
            >
              <span class="circle" v-if="ava.avatar">
                <img :src="ava.avatar" :onerror="defaultImg" alt />
                <!-- <SvgIcon name="sue" color="pink" width="14px" height="14px"/> -->
              </span>

              <span class="circle" v-else>
                <img
                  v-if="ava.status !== '1'"
                  src="../../commonImg/female.png"
                  alt
                />
                <img
                  v-else-if="ava.status !== '2'"
                  src="../../commonImg/male.png"
                  alt
                />
                <img v-else src="../../assets/image/code.png" />
              </span>
              <SvgIcon
                :name="getApprovalsStatus(ava)"
                color="pink"
                width="14px"
                height="14px"
                style="
                  position: absolute;
                  bottom: 27px;
                  right: 11px;
                  background-color: white;
                  border-radius: 10px;
                "
              ></SvgIcon>
              <!-- <SvgIcon name="agree" color="pink" width="14px" height="14px" style="position: absolute;left: 20px;top: 20px;"></SvgIcon> -->
              <div class="list-name" style="text-align: center">
                {{ ava.name }}
              </div>
            </span>
          </div>

          <!-- 审批意见 -->
          <div
            class="node-opinion"
            v-if="line.handleOpinion && sourceName == 'todo'"
          >
            {{ line.handleOpinion }}
          </div>
        </div>
        <template #dot>
          <!-- 单人头像 -->
          <template v-if="line.approvals.length <= 1">
            <span
              class="circle"
              v-if="line.approvals[0] && line.approvals[0].avatar"
            >
              <img :src="line.approvals[0].avatar" :onerror="defaultImg" alt />
            </span>
            <span class="circle" v-else>
              <img
                v-if="line.approvals[0] && line.approvals[0].status !== '1'"
                src="../../commonImg/female.png"
                alt
              />
              <img
                v-else-if="
                  line.approvals[0] && line.approvals[0].status !== '2'
                "
                src="../../commonImg/male.png"
                alt
              />
              <img v-else src="../../assets/image/code.png" />
            </span>
          </template>
          <!-- 多人头像 -->
          <template v-else>
            <span class="circle">
              <SvgIcon
                :name="getDefaultPic(line)"
                color="pink"
                width="32px"
                height="32px"
              ></SvgIcon>
            </span>
          </template>
          <!-- 状态图标 -->
          <SvgIcon
            :name="getIconName(line)"
            color="pink"
            width="14px"
            height="14px"
            style="position: absolute; left: 20px; top: 20px"
          ></SvgIcon>
        </template>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
/**
 * @module EgTimelineInner
 * @author 何志强
 * @description 代办流程节点展示， 自带业务功能催办
 */
export default {
  name: "EgTimelineInner",
  data() {
    return {
      attrObject: {
        type: "link",
        size: "small",
        text: "催办",
      },
      token: sessionStorage.getItem("Authorization"),
      userId: "83133C71402F45D7A64DE68D3D1064CD",
      defaultImg:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", //默认图地址
    };
  },
  computed: {
    manyPeoFlowList() {
      let arr = new Array();
      // let obj = {
      //   // name: this.flowNode.name,
      //   // nodeId: this.flowNode.nodeId,
      //   // type: this.flowNode.type,
      //   // activateType: this.flowNode.properties.actionerRules[0].actType,
      //   // agreeAll: this.flowNode.properties.agreeAll
      //   // name:'123123123',
      //   nodeId:'node_41241241241',
      // };

      //   let approved = this.flowNode.properties.actionerRules[0].approvals.filter(item => item.status !== "1");
      //   let noneApprove = this.flowNode.properties.actionerRules[0].approvals.filter(item => item.status == "1");
      //   approved.forEach(element => {
      //     let O = {
      //       // 代办有审批意见, 需要按照时间排序
      //       status: element.status,
      //       handleOpinion: element.handleOpinion,
      //       handleTime: element.handleTime,
      //       type: this.flowNode.properties.actionerRules[0].type,
      //       approvals: [element],
      //       ...obj
      //     };
      //     arr.push(O);
      //   });
      //   arr = this.handleTimeSort(arr, "handleTime");
      //   if (noneApprove.length > 0) {
      //     arr.push({
      //       // 代办有审批意见
      //       status: "1",
      //       handleOpinion: "",
      //       handleTime: "",
      //       type: this.flowNode.properties.actionerRules[0].type,
      //       approvals: noneApprove,
      //       ...obj
      //     });
      //   }
      // this.hisList.forEach(element => {
      //     arr.push({
      //         name:element.name,status:'0',handleTime:'2023-12-11 00:00:00',activateType:'and',approvals:[{RY_JBXX__NAME:'发起人',RY_JBXX__PHOTO:"default"}],...obj
      //     })
      // });
      // arr.push({name:'发起人',status:'0',handleTime:'2023-12-11 00:00:00',activateType:'and',approvals:[{RY_JBXX__NAME:'发起人',RY_JBXX__PHOTO:"default"}],...obj})
      // arr.push({name:'审批人',status:'0',handleTime:'2023-12-12 00:00:00',activateType:'and',approvals:[{RY_JBXX__NAME:'哈哈',RY_JBXX__PHOTO:"default",handleOpinion:"123456"},{RY_JBXX__NAME:'哈哈哈',RY_JBXX__PHOTO:"default",handleOpinion:"123456"},{RY_JBXX__NAME:'哈哈哈',RY_JBXX__PHOTO:"default",handleOpinion:"123456"}],...obj})
      // arr.push({name:'审批人',status:'0',handleTime:'2023-12-12 00:00:00',activateType:'and',approvals:[{RY_JBXX__NAME:'哈哈哈',RY_JBXX__PHOTO:"default",handleOpinion:"123456"},{RY_JBXX__NAME:'哈哈哈',RY_JBXX__PHOTO:"default",handleOpinion:"123456"}],...obj})

      return this.hisList;
    },
  },
  /**
   * Props 接受父组件的传值 重要参数
   * @prop {String} curNodeIDs 当前审批中节点id
   * @prop {String} applyUser 申请人， 原始发起人
   * @prop {String} creator 代理的发起人
   * @prop {Object} flowNode 流程节点数据源
   * @prop {String} instanceId 催办接口使用
   * @prop {String} sourceName 组件引用来源 可为 todo（代办）、application（申请）  默认 todo
   * @prop {String} opinionVisible 审批意见是否显示 （为0 且当 sourceName == application） 时 或者 （sourceName == todo）时 显示
   */
  props: {
    applyUser: {
      type: String,
    },
    creator: {
      type: String,
    },
    flowNode: {
      type: Object,
    },
    instanceId: {
      type: String,
    },
    sourceName: {
      default: "todo",
    },
    opinionVisible: {
      type: String,
      default: "0",
    },
    proceedTasks: {
      type: Array,
      default: () => [],
    },
    hisList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 根据时间排序
    handleTimeSort(arr, name) {
      arr.sort((a, b) => {
        let t1 = new Date(a[name]);
        let t2 = new Date(b[name]);
        return t2.getTime() - t1.getTime();
      });
      return arr;
    },
    /**
     * @function getIconName
     * @description: 根据节点状态设置回显图标
     * @param {*}
     */
    getIconName(item) {
      return item.status === "0" && this.proceedTasks.includes(item.nodeId)
        ? "doing"
        : item.status === "1"
        ? "agree"
        : item.status === "3"
        ? "reject"
        : item.status == "4"
        ? "icon-full-flow-back"
        : item.status == "5"
        ? "icon-full-flow-agree"
        : item.status == "6"
        ? "icon-full-flow-agree"
        : item.status == "7"
        ? "icon-full-flow-share"
        : "";
    },
    /**
     * @function getstatus
     * @description: 回显状态名称， type: start发起人， approver审批人， notifier抄送人
     * @param {*}
     */
    getApprovalsStatus(item) {
      //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过
      return item.status == "0"
        ? "doing"
        : item.status == "1"
        ? "agree"
        : item.status == "3"
        ? "reject"
        : item.status == "4"
        ? "(退回)"
        : item.status == "5"
        ? "(自动同意)"
        : item.status == "6"
        ? "(自动通过)"
        : item.status == "7"
        ? "(转审批)"
        : "";
    },
    /**
     * @function getstatus
     * @description: 回显状态名称， type: start发起人， approver审批人， notifier抄送人
     * @param {*}
     */
    getstatus(item) {
      //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过
      return item.status == "0" && this.proceedTasks.includes(item.nodeId)
        ? "(审批中)"
        : item.status == "1" && item.type != "0"
        ? "(已同意)"
        : item.status == "3"
        ? "(不同意)"
        : item.status == "4"
        ? "(退回)"
        : item.status == "5"
        ? "(自动同意)"
        : item.status == "6"
        ? "(自动通过)"
        : item.status == "7"
        ? "(转审批)"
        : "";
    },
    /**
     * @function getDefaultPic
     * @description: 回显状态名称， type: start发起人， approver审批人， notifier抄送人
     * @param {*}
     */
    getDefaultPic(item) {
      //  1: 有效 2： 同意 3. 不同意 4： 退回 5：自动同意 6：自动通过
      return item.type === "2"
        ? "copy"
        : item.type === "1" && item.approvalMode === "AND"
        ? "more"
        : item.type == "1" && item.approvalMode === "OR"
        ? "more"
        : item.type == "1" && item.approvalMode === "NEXT"
        ? "more"
        : "copy";
    },
  },
};
</script>
<style lang="scss">
.eg-timeline-inner {
  .ant-timeline-item-last {
    .ant-timeline-item-content {
      padding-bottom: 0px !important;
      margin-left: 24px !important;
    }
  }
  .line-item {
    padding: 0px;
    // margin-bottom: 30px;
    .circle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      display: inline-block;
      border: 1px solid #e8e8e8;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .ant-timeline-item-content {
      //   left: $spacing-m;
      left: 20px;
      margin: 0 0 0 22px;
      padding-bottom: 36px;
      top: -15px;
      .line-right {
        .circle {
          margin-left: 12px;
          margin-right: 12px;
        }
        .list-node {
          margin-bottom: 0;
        }
        .list-node-name {
          //   margin-bottom: $spacing-m;
          margin-bottom: 20px;
        }
        .list-node {
          //   @include text-02;
        }
        .list-node-name {
          //   @include explain-01;
        }
        .node-handle-time {
          top: 0;
          position: absolute;
          right: 0;
          //   @include explain-03;
        }
        .node-opinion {
          //   @include text-02;
          //   padding: $spacing-m $spacing-l;
          padding: 20px 20px;
          //   background-color: $bg-light;
          background-color: #fafafa;

          margin: 0;
        }
        .list-persin {
          display: inline-block;
          height: 32px;
          .list-name {
            text-align: center;
          }
        }
      }
    }
    .ant-timeline-item-head {
      padding: 0 !important;
      .status-icon {
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
  }
}
.el-timeline-item__dot {
  left: -10px;
  top: -14px;
}
.el-timeline-item__wrapper {
  position: relative;
  padding-left: 28px;
  top: -9px;
}
</style>

